---
title: Input
description: Displays a form input field or a component that looks like an input field.
shadcnDocsLink: https://ui.shadcn.com/docs/components/input
---

<ComponentPreview component="input">
  ```tsx file=<rootDir>/src/examples/ui/input/index.tsx
  ```
</ComponentPreview>

## Installation

<Installation component="input">
  ```tsx file=<rootDir>/src/components/ui/input.tsx
  ```
</Installation>

## Usage

```ts
import { Input } from '@/components/ui/input'
```

```tsx
<Input className="w-[200px]" type="email" placeholder="Email" />
```

## Examples

### Default

<ComponentPreview component="input" example="default">
  ```tsx file=<rootDir>/src/examples/ui/input/index.tsx
  ```
</ComponentPreview>

### File

<ComponentPreview component="input" example="file">
  ```tsx file=<rootDir>/src/examples/ui/input/file.tsx
  ```
</ComponentPreview>

### Disabled

<ComponentPreview component="input" example="disabled">
  ```tsx file=<rootDir>/src/examples/ui/input/disabled.tsx
  ```
</ComponentPreview>

### With Label

<ComponentPreview component="input" example="with-label">
  ```tsx file=<rootDir>/src/examples/ui/input/with-label.tsx
  ```
</ComponentPreview>

### With Button

<ComponentPreview component="input" example="with-button">
  ```tsx file=<rootDir>/src/examples/ui/input/with-button.tsx
  ```
</ComponentPreview>